<template>
  <div class="w-full">
    <div class="flex justify-between items-center mb-3">
      <div>
        <span class="doctor-name">{{ info.doctorName }}</span>
        <span class="ml-2">的报告</span>
      </div>

      <van-button
          v-if="showDownloadBtn"
          class="w-[30px]"
          size="mini"
          type="primary"
          @click="downloadFile"
      >下载
      </van-button>
    </div>

    <div class="flex flex-col gap-y-1.5">
      <Filed label="诊断意见" :value="info.advice" open-ellipsis/>
      <Filed label="治疗建议" :value="info.suggest" open-ellipsis/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import Filed from "./Filed.vue";

export default defineComponent({
  name: "ConsultationReport",
  components: {Filed},
  props: {
    info: Object,
  },
  data() {
    return {};
  },
  computed: {
    showDownloadBtn() {
      return !this.info.isApply || this.info.reportStatus === "publish";
    },
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  methods: {
    downloadFile() {
      const a = document.createElement("a");
      a.href = this.info.reportUrl;
      a.download = this.info.reportUrlName;
      a.click();
      document.body.removeChild(a);
    },
  },
  beforeUnmount() {
  },
  unmounted() {
  },
});
</script>

<style scoped lang="scss">
div {
  font-size: 12px;
  line-height: 20px;
  color: #333;
}

.doctor-name {
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  color: #2f54eb;
}
</style>
